@import '../../../@theme/styles/themes';

@include nb-install-component() {

  $accent-line-bg: linear-gradient(180deg, #3366ff 0%, #7396ff 100%);
  $title-fg: nb-theme(color-fg-heading);
  $text-fg: nb-theme(color-fg-text);

  display: flex;
  flex-grow: 1;
  width: 100%;
  margin: 2rem 0;
  flex-direction: column;
  font-size: 0.75rem;

  h2 {
    color: $title-fg;
    font-size: 2.625em;
    font-weight: bold;
    line-height: 2.25em;
    margin-bottom: 1.25em;
    display: flex;

    span {
      display: flex;

      &:first-child {
        width: 15%;
        flex-direction: column;
        justify-content: center;
        margin-right: 2rem;
      }
    }

    .line {
      background: $accent-line-bg;
      display: block;
      width: 100%;
      height: 0.25rem;
      margin-bottom: 0.375rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  p {
    color: $text-fg;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  @include media-breakpoint-up(md) {
    width: calc(50% - 10rem);
    font-size: 1rem;
    margin: 2rem 3rem 2.5rem 5rem;
  }
}
